<!-- 地图选点 -->
<template>
	<view class="vk-data-input-map">
		<u-input
			v-if="showInput"
			type="select"
			:value="textCom"
			:modelValue="textCom"
			:placeholder="placeholder"
			:input-align="inputAlign"
			@click="open"
		></u-input>

		<u-picker ref="address" mode="region"></u-picker>
	</view>
</template>

<script>
	/**
	 * map 地图
	 * @description 地图选址
	 * @property {String} placeholder 提示
	 * @property {String} input-align 输入框文字的对齐方式 可选 left right center
	 * @property {Boolean} show-input 是否显示input 默认true
	 * @event {Function} confirm 点击确定的事件
	 * @event {Function} backspace 键盘退格键被点击
	 * @example <vk-data-input-map v-model="form1.position" placeholder="点击选择定位,方便用户查找" />
	 */
	export default {
		name: "vk-data-input-map",
		emits: ["update:modelValue", "input", "confirm"],
		props: {
			// 值
			value: {},
			modelValue: {},
			// 提示
			placeholder: {
				type: String,
				default: ""
			},
			inputAlign: {
				type: String
			},
			// 是否显示input
			showInput: {
				type: Boolean,
				default: true
			}
		},
		data: function() {
			// 组件创建时，进行数据初始化
			return {};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init() {

			},
			// 更新表单值
			_updateValue(data) {
				let vk = uni.vk;
				let { valueCom } = this;
				let value = JSON.parse(JSON.stringify(valueCom));
				if (!value) value = {};
				this.$set(value, "name", data.name); // 地址名称
				this.$set(value, "latitude", data.latitude); // 纬度
				this.$set(value, "longitude", data.longitude); // 经度
				if (data.province) this.$set(value, "province", data.province);
				if (data.city) this.$set(value, "city", data.city);
				if (data.area) this.$set(value, "area", data.area);
				this.$set(value, "address", data.address); // 详细地址
				this.$set(value, "formatted_address", data.formatted_address); // 完整地址
				this.$emit("input", value);
				this.$emit("update:modelValue", value);
				this.$emit("confirm", value);
			},
			// 打开地图选址
			open() {
				let vk = uni.vk;
				let { valueCom } = this;
				let value = JSON.parse(JSON.stringify(valueCom));
				if (!value) value = {};
				uni.chooseLocation({
					latitude: value.latitude,
					longitude: value.longitude,
					success: (data) => {
						data.formatted_address = data.address;
						data.address = "";
						let text = `${data.formatted_address}`;
						let res = this.$refs.address.regionDiscern(text);
						if (res.code == 0) {
							vk.pubfn.objectAssign(data, res.data);
						}
						this._updateValue(data);
					}
				});
			}
		},
		watch: {
			valueCom: {
				deep: true,
				handler(newVal, oldVal) {
					try {
						let formatted_address = `${newVal.province.name}${newVal.city.name}${newVal.area.name}${newVal.address}`;
						if (newVal.formatted_address !== formatted_address) {
							this.$set(newVal, "formatted_address", formatted_address); // 更新完整地址
							this._updateValue(newVal);
						}
					} catch (err) {}
				}
			}
		},
		// 计算属性
		computed: {
			valueCom() {
				// #ifdef VUE2
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			},
			textCom() {
				let { valueCom } = this;
				let value = JSON.parse(JSON.stringify(valueCom));
				let str = "";
				if (value && value.latitude !== undefined && value.longitude !== undefined) {
					if (value.name) {
						str = value.name;
					} else if (value.address) {
						str = value.address;
					} else if (value.formatted_address) {
						str = value.formatted_address;
					}
				}
				return str;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.vk-data-input-map {
		display: contents;

		.input-map-placeholder {
			color: #c0c4cc;
			display: flex;
			align-items: center;
		}

		.input-map-placeholder.actived {
			color: #303133;
		}

		.input-map-text-one {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>